<template>
	<div class="nav_bar">
		<!-- config-provider 用于全局配置 Vant 组件，提供深色模式、主题定制等能力。-->
		<van-config-provider :theme-vars="themeVars">
			<van-nav-bar :title="title">
				<template #left>
					<van-icon class="home_icon icon" name="wap-home-o" size="25"/>
				</template>
				<template #right>
					<van-icon class="search_icon icon" name="search" size="25"/>
					<van-icon class="cart_icon icon" name="cart-o" size="25"/>
				</template>
			</van-nav-bar>
		</van-config-provider>
	</div>

</template>

<script lang="ts">
export default {
    name: "NavBar"
}
</script>

<script setup lang="ts">
import {reactive} from "vue";

const props = defineProps<{
    title: string
}>();


// 自定义样式覆盖
const themeVars = reactive({
    fontBold: 300,
    NavBarHeight: "50px",
    LineHeight: "50px"
});

</script>

<style lang="less" scoped>

.nav_bar {
  // fixed 布局不占位，用一个元素包裹着，设置高度
  height: 50px;

  // NavBar 导航栏插件内置样式
  .van-nav-bar .van-icon {
    --van-nav-bar-icon-color: #555b61;
    --van-nav-bar-title-font-size: 16px;
  }

  .van-icon:nth-child(1) {
    margin-right: 20px;
  }
}


</style>